<template>
	<div class="container">
		<div class="center">
			<!-- <div class="center-card" v-show="item.shoucang" v-for="(item, index) in newactivity" :key="index"> -->
			<div class="center">
				<div class="center-card" v-for="(item, index) in newactivity" :key="index">
					<div class="top-img"><img @click="toactivitydetail(index)" :src="item.activity_cover" /></div>
					<div class="other">
						<div class="center-text">
							<!-- <div class="top-tiao"><el-progress :text-inside="true" :stroke-width="15" :percentage=Math.floor((item.activity_participator_num/item.activity_people_max_num)*100) status="warning"></el-progress></div> -->
							<div class="center-shuzi">
								<div class="shuzi-left">
									<span>已报名人数:</span>
									<p>{{ item.activity_participator_num }}</p>
								</div>
								<div class="shuzi-right">
									<span>需求人数:</span>
									<p>{{ item.activity_people_max_num }}</p>
								</div>
							</div>
						</div>
						<div class="buttom-text" @click="toactivitydetail(index)">
							<h2>{{ item.activity_name }}</h2>
							<div class="inputtime">
								<i class="el-icon-time"></i>
								<span>{{ item.activity_begin_time }}</span>
								<span>-</span>
								<span>{{ item.activity_end_time }}</span>
							</div>
							<div class="jieshaotext">
								<p>{{ item.activity_detail }}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { request } from '../api/axios.js';
export default {
	name: 'collectingactivities',
	data() {
		return {
			index: '',
			newactivity: {
				// imgurl:'http://8.136.157.194:8000/media/',
				activity_address: '',
				activity_begin_time: '',
				activity_city: '',
				activity_cover: '',
				activity_create_time: '',
				activity_detail: '',
				activity_district: '',
				activity_end_time: '',
				activity_initiator_id: 0,
				activity_initiator_phone: '',
				activity_name: '',
				activity_participator_num: 0,
				activity_people_max_num: 0,
				activity_province: '',
				activity_status: '',
				activity_tag: '',
				id: 0
			}
		};
	},
	methods: {
		getcollect() {
			request({
				url: '/v1/activities/selfcollectactivity',
				method: 'post',
				data: {
					userName: this.$store.state.userInfo.userName
				}
			}).then(res => {
				console.log(res);
				this.newactivity = res.data.data;
				res.data.data.map(item => {
					item.activity_cover = this.$store.state.publicStaticPath + item.activity_cover;
				});
				console.log(this.newactivity);
			});
		},
		toactivitydetail(index) {
      let nowid = this.newactivity[index].id;
      this.$store.dispatch('toActivityDetail', nowid);
      this.$router.push({
        path: '/activitydetail',
      });
		}
	},
	created() {
		this.getcollect();
	}
};
</script>

<style scoped>
.container {
	width: 100%;
	display: flex;
}
.center {
	margin-right: 2rem;

	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin: -3rem 0rem 0rem 6rem;
}
.center .center-card {
	margin: 0rem 0 0rem 4rem;
	width: 22rem;
}
.footer .block {
}
.buttom-text .news-routerlink {
	text-decoration: none;
	color: white;
}
.top-img {
	cursor: pointer;
}
.top-img img {
	height: 15rem;
	width: 100%;
	margin-left: -0.25rem;
}
</style>
